<template>
	<view class="px-3">
		<uniListItem title="头像">
			<view class="flex align-center" slot='right' @click="changeUserpic">
				<image :src="userpic"
				style="height: 100rpx;width: 100rpx;border-radius: 50rpx;"></image>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<uniListItem title="昵称">
			<view class="flex align-center" slot='right'>
				<input type="text" v-model="nickname" class="text-right"/>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<uniListItem title="性别">
			<view class="flex align-center" slot='right' @click="changeOnSex">
				<text>{{sexText}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<picker mode="date" :value="birthday" @change="changeBirthday">
			<uniListItem title="生日">
				<view class="flex align-center" slot='right'>
					<text>{{birthday}}</text>
					<text class="iconfont icon-bianji1 ml-2"></text>
				</view>
			</uniListItem>
		</picker>
		<uniListItem title="情感">
			<view class="flex align-center" slot='right' @click="changeEmotion">
				<text>{{emotion}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<uniListItem title="职业">
			<view class="flex align-center" slot='right' @click="changeJob">
				<text>{{job}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<uniListItem title="家乡" @click='cityPicker'>
			<view class="flex align-center" slot='right'>
				<text>{{pickerText}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uniListItem>
		<view class="px-2 py-3">
			<button class="bg-main text-white" style="border-radius: 50rpx;" type="primary"
			>完成资料编辑</button>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" 
		:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm">
		</mpvue-city-picker>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {uniListItem,mpvueCityPicker},
		data() {
			return {
				list: [
					'头像','昵称','性别','生日','情感','职业','家乡'
				],
				userpic: '/static/demo/datapic/20.jpg',
				nickname: '昵称',
				sexArray: ['保密', '男', '女'],
				sexText: '保密',
				emotionArray: ['保密', '已婚', '未婚'],
				emotion: '保密',
				jobArray: ['工程师', 'IT编程', '会计师'],
				job: '工程师',
				birthday: '1990-10-11',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '湖南省-长沙市-岳麓区',
			}
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		methods:{
			changeUserpic() {
				uni.chooseImage({
					count: 1, //图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择 照相机
					success: (res) => {
						this.userpic = res.tempFilePaths[0]
					}
				})
			},
			changeOnSex() {
				uni.showActionSheet({
				    itemList: this.sexArray,
				    success: (res) => {
						this.sexText = this.sexArray[res.tapIndex]
				    }
				});
			},
			changeEmotion() {
				uni.showActionSheet({
				    itemList: this.emotionArray,
				    success: (res) => {
						this.emotion = this.emotionArray[res.tapIndex]
				    }
				});
			},
			changeJob() {
				uni.showActionSheet({
				    itemList: this.jobArray,
				    success: (res) => {
						this.job = this.jobArray[res.tapIndex]
				    }
				});
			},
			changeBirthday(e) {
				this.birthday = e.detail.value
			},
			onConfirm(e) {
				this.pickerText = e.label
				console.log(this.pickerText)
			},
			cityPicker() {
				this.$refs.mpvueCityPicker.show()
			}
		}
	}
</script>

<style>
</style>
